<template>
  <div class="product_page">
    <PageHead />
    <ul class="product_page_ul">
      <li v-for="item in menu" :key="item.id" @click="change(item.id)">
        {{ item.name }}
      </li>
    </ul>

    <ul class="product_page_list" id="product_page_list">
      <li v-for="item in list" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>
<script setup lang="ts">
import {
  menu,
  newProductList,
  oldProductList,
  huoProductList,
} from "@/database/product";
useSeoMeta({ title: "产品" });
let index = ref(1);
let list = ref([]);
onMounted(() => {
  setList();
});
const change = (type: number) => {
  index.value = type;
  setList();
};

const setList = () => {
  // 假设你有一个元素，它有一个ID为'myElement'
  var element: any = document.getElementById("product_page_list");
  element.className = "";
  // 定义动画
  // element.style.opacity = 0.5; // 设置初始透明度为0
  // element.style.transform = "translateX(-100px)"; // 设置动画过渡效果
  // setTimeout(function () {
  //   element.style.opacity = 0; // 设置结束状态的透明度为1，触发动画
  // }, 400);
  setTimeout(function () {
    nextTick(() => {
      switch (index.value) {
        case 1:
          list.value = [...newProductList];
          element.className = "product_page_list1";
          break;
        case 2:
          list.value = [...oldProductList];
          element.className = "product_page_list2";
          break;
        case 3:
          list.value = [...huoProductList];
          element.className = "product_page_list3";
          break;
      }
      // element.style.opacity = 0.5; // 设置初始透明度为0
    });
  }, 500);
  // 触发动画
  // setTimeout(function () {
  //   element.style.opacity = 1; // 设置结束状态的透明度为1，触发动画
  //   element.style.transform = "translateX(0px)"; // 设置动画过渡效果
  // }, 1000); // 在0.5秒后开始动画

  // 使用'none'来明确地移除所有的动画效果
  // element.style.animation = "none";

  // element.style.animation = "action_translateY 3s";
};

// const actionOut = (obj, actionName, time, speed) => {
//   $(obj).css({ animation: actionName + " " + time + "s" + " " + speed });
//   var setInt_obj = setInterval(function () {
//     $(obj).hide();
//     clearInterval(setInt_obj);
//   }, time * 1000);
// };
</script>
<style scoped lang="scss">
.product_page {
  position: relative;
  top: 60px;
  .product_page_ul {
    list-style: none;
    display: flex;
    gap: 8px;
    background-color: azure;
    margin: 0;
    height: 60px;
    align-items: center;
    width: 100%;
  }
}

.product_page_list1 {
  transition: transform 1s ease-in-out;
  animation: action_translateY 2s;
  // animation-name: ball;
  // animation-duration: 2s;
}
.product_page_list2 {
  transition: transform 1s ease-in-out;
  animation: action_translateY 2s;
  // animation-name: ball;
  // animation-duration: 2s;
}
.product_page_list3 {
  animation: action_translateY 2s;
}
@keyframes action_translateY {
  0% {
    transform: translateX(50px);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}

@keyframes action_translateYOut {
  0% {
    transform: translateY(0px);
    opacity: 1;
  }
  100% {
    transform: translateY(50px);
    opacity: 0;
  }
}
</style>
